<template>
	<view class="home">
		<custom-head-bar id="customHeadBar"></custom-head-bar>
		<view class="wrapper">
			<view class="infoModel">
				<view class="left">免费配送

				</view>
				<navigator url="/pages/order/order" class="right">
					<u-icon name="order" color="#576b95" size="22"></u-icon>
					我的订单
				</navigator>
			</view>
			<view class="scrollLayout">
				<view class="leftScroll">
					<scroll-view scroll-y class="sContent" :scroll-top="leftScrollValue">
						<view class="navitem" :class="index==navIdx?'active':''" v-for="(item,index) in dataList" :key="item._id"
							@click="clickNav(index)">{{item.name}}</view>
					</scroll-view>
				</view>
				<view class="rightScroll">

					<navigator url="/pages/search/search" class="searchView">
						<u-icon name="search" size="22" color="#576b95"></u-icon>
						搜索
					</navigator>
					<scroll-view @scroll="rightScrollEnt" :scroll-top="rightScrollValue" scroll-y scroll-with-animation
						class="sContent">
						<view class="productView" v-for="item in dataList">
							<u-sticky :customNavHeight="0" zIndex="2">
								<view class="proTitle">{{item.name}}</view>
							</u-sticky>
							<view class="proContent">
								<view class="proitem" v-for="pro in item.children">
									<product-item :item="pro" @onClickProductItem="onClickProductItem"
										@click.native="onClickItemVeiw(pro)"></product-item>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>

			</view>
		</view>
		<!-- 选规格 -->
		<u-popup v-if="show" :show="show" :round="10" closeable class="popup-product" closeOnClickOverlay @close="close">
			<view class="product-content">
				
					<view class="pro-item">
						<view class="pic">
							<image class="img" :src="productItem.thumb[0].url" mode="aspectFill"></image>
						</view>
						<view class="text">
							<view class="title">{{productItem.name}}</view>
							<view class="price">
								<view class="big">￥{{productItem.price.toFixed(2)}}</view>
							</view>
						</view>
					</view>
		
				<u-cell-group>
					<view class="pro-item">
						<view class="productCheckbox" v-for="(item,index) in productItem.sku_select">
							<view class="title">
								{{item.skuName}}
							</view>
							<uni-data-checkbox v-model="item.value" :localdata="range(item)"></uni-data-checkbox>
						</view>
					</view>
				</u-cell-group>
				<u-cell-group>
					<view class="pro-item">
						<view class="num">
							<view class="title" style="margin-right: 10px;">购买数量</view>
							<pro-num-box :item="productItem"></pro-num-box>
						</view>
					</view>
				</u-cell-group>
				<u-cell-group>
					<view class="pro-item" style="padding: 12px 0">
						<u-button type="error" text="确认" style="width: 40%;"></u-button>
					</view>

				</u-cell-group>
			</view>
		</u-popup>

		<!-- 查看详情-->
		<u-popup v-if="veiwShow" :show="veiwShow" :round="10" closeable class="popup-product" closeOnClickOverlay
			@close="closeVeiwShow">
			<view>
				<u-cell-group>
					<view class="veiw-item">
						<view class="pic">
							<image class="img" :src="productItem.thumb[0].url" mode="aspectFill"></image>
						</view>
						<view class="text">
							<view class="title">{{productItem.name}}</view>
							<view class="price">
								<view class="big">￥{{productItem.price.toFixed(2)}}</view>
							</view>
						</view>
					</view>
				</u-cell-group>
				<u-cell-group>
					<view class="veiw-item">
						<view class="text">
							<view class="title">商品详情</view>
							<view style="padding: 12px 0;">
								<view>酒精度13.5%</view>
							</view>
						</view>
					</view>
				</u-cell-group>
<!-- 				<u-cell-group>
					<view class="veiw-item">
						<u-button type="error" icon="shopping-cart" text="加入购物车" style="width: 50%;">

						</u-button>
					</view>
				</u-cell-group> -->
			</view>
		</u-popup>
		<car-layout v-if="buyNum>0"></car-layout>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from "vuex"
	const goodsCloudObj = uniCloud.importObject("kt-mall-goods", {
		"customUI": true
	})
	const categoryCloudObj = uniCloud.importObject("kt-mall-category", {
		"customUI": true
	})
	export default {
		data() {
			return {
				navIdx: 0,
				leftScrollValue: 0,
				rightScrollValue: 0,
				leftHitArr: [],
				rightHitArr: [],
				foldState: false,
				show: false,
				productItem: {},
				value: 0,

				veiwShow: false,
				// range: [{"value": 0,"text": "篮球"	},{"value": 1,"text": "足球"},{"value": 2,"text": "游泳"}]
			}
		},
		onLoad() {
			this.$nextTick(() => {
				this.getHeightArr();
			})
			// uni.showLoading({ title: '正在加载中'})
			// categoryCloudObj.get().then(res => {
			// 	let category = res.data
			// 	goodsCloudObj.get().then(goodsRes => {
			// 		let goods = goodsRes.data
			// 		category.map(v => {
			// 			v.children = []
			// 			goods.map(item => {
			// 				item.numvalue = 0
			// 				if (v._id == item.category_id) {
			// 					v.children.push(item)
			// 				}
			// 			})
			// 		})
					
			// 		this.setDataList(category)
			// 		// this.dataList = category
			// 		console.log(category, 'category')
			// 		uni.hideLoading();
			// 	})
			// })
		},
		computed: {
			...mapGetters(["buyNum", "dataList"])
		},
		methods: {
			...mapMutations(["setFoldState", "setDataList"]),
			//点击导航菜单
			clickNav(index) {
				if (this.navIdx == index) return;
				this.navIdx = index;
				if (this.timeout) {
					clearTimeout(this.timeout);
				}
				this.timeout = setTimeout(() => {
					this.leftScrollValue = this.leftHitArr[index];
					this.rightScrollValue = this.rightHitArr[index];
				}, 100)
			},
			//获取滚动条内容高度
			getHeightArr() {
				let selectorQuery = uni.createSelectorQuery();
				let customHeadBar;
				//获取自定义导航高度				
				selectorQuery.select("#customHeadBar").boundingClientRect(rect => {
					customHeadBar = rect.height;
				}).exec()


				//左侧滚到区域的节点组
				selectorQuery.selectAll(".navitem").boundingClientRect(rects => {
					this.leftHitArr = rects.map(item => item.top - customHeadBar - 40)
				}).exec()
				console.log(this.leftHitArr);
				//右侧滚到区域的节点组
				selectorQuery.selectAll(".productView").boundingClientRect(rects => {
					this.rightHitArr = rects.map(item => item.top - customHeadBar - 40)
				}).exec()

			},

			//监听右侧滚动条的改变
			rightScrollEnt(e) {
				let scrollTop = Math.ceil(e.detail.scrollTop);
				let idx = this.rightHitArr.findIndex((value, index, arr) => scrollTop >= value && scrollTop < arr[index +
					1])
				this.navIdx = idx;
				this.leftScrollValue = this.leftHitArr[idx];

				if (scrollTop < 300) {
					this.setFoldState(false)
				}
				if (scrollTop > 400) {
					this.setFoldState(true)
				}
			},
			onClickProductItem(item) {
				item.sku_select.map(v => v.value = v.skuName)
				this.productItem = item
				this.show = true
			},
			close() {
				this.show = false
			},
			closeVeiwShow() {
				this.veiwShow = false
			},
			onClickItemVeiw(item) {
				this.veiwShow = true
				this.productItem = item

			},
			range(item) {
				return item.children.map(v => {
					return {
						value: v.name,
						text: v.name,
					}
				})

			}

		}
	}
</script>

<style lang="scss" scoped>
	.home {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.wrapper {
			flex: 1;
			background: #fff;
			border-radius: 10px 10px 0 0;
			margin-top: -10px;
			position: relative;
			z-index: 2;
			overflow: hidden;

			.infoModel {
				color: $text-font-color-1;
				@include flex-box();
				height: 50px;
				background: #fff;
				padding: 0 30rpx;
				font-size: 32rpx;
				border-bottom: 1px solid $border-color;

				.right {
					@include flex-box();
					color: $brand-theme-color-aux;
				}
			}

			.scrollLayout {
				height: calc(100% - 100rpx);
				@include flex-box();

				.leftScroll {
					height: 100%;
					width: 190rpx;
					border-right: 1px solid $border-color;
					background: $page-bg-color;

					.navitem {
						font-size: 30rpx;
						padding-left: 30rpx;
						line-height: 100rpx;
						color: $text-font-color-2;
						position: relative;

						&.active {
							color: $text-font-color-1;
							background: #fff;

							&::after {
								content: "";
								width: 6rpx;
								height: 30rpx;
								background: $brand-theme-color;
								position: absolute;
								left: 0;
								top: 50%;
								transform: translateY(-50%);
							}
						}
					}
				}

				.rightScroll {
					height: 100%;
					flex: 1;
					position: relative;

					.searchView {
						position: absolute;
						top: 0;
						right: 30rpx;
						z-index: 3;
						@include flex-box-set();
						height: 90rpx;
						color: $brand-theme-color-aux;
					}

					.productView {
						padding: 0 30rpx;

						.proTitle {
							line-height: 90rpx;
							font-size: 30rpx;
							background: #fff;
						}
					}
				}

				.sContent {
					height: 100%;
				}
			}
		}
	}
</style>


<style lang="scss">
	.product-content {
		padding: 15px 15px 0 15px;

		.productCheckbox {
			.title {
				padding: 12px 0;
			}
		}
	}

	.pro-item {
		width: 100%;
		@include flex-box();
		padding: 25rpx 0;

		.pic {
			width: 170rpx;
			height: 170rpx;
			border-radius: 20rpx;
			overflow: hidden;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.text {
			flex: 1;
			padding-left: 20rpx;
			position: relative;

			.title {
				font-size: 34rpx;
				font-weight: bold;
				@include ellipsis();
			}

			.price {
				@include flex-box-set(start, end);
				font-weight: bold;
				padding: 25rpx 0;

				.big {
					font-size: 34rpx;
					color: $brand-theme-color;
				}

				.small {
					font-size: 26rpx;
					opacity: 0.4;
					text-decoration: line-through;
					padding-left: 10rpx;
				}
			}

			.discount {
				font-size: 22rpx;
				color: $brand-theme-color;
				padding: 3rpx 8rpx;
				border: 1rpx solid $brand-theme-color;
				display: inline-block;
				border-radius: 6rpx;
			}

			.numbox {
				position: absolute;
				right: 0;
				bottom: 0;

				.skuSelect {
					height: 40rpx;
					padding: 0 10rpx;
					background: $brand-theme-color;
					font-size: 28rpx;
					color: #fff;
				}

			}
		}
	}

	.productCheckbox {

		::v-deep .checklist-box.is--default.is-checked .checklist-text {
			color: red !important;
			background: #FFF6F6;
			display: inline-block;
			padding: 10px;
		}

		::v-deep .checklist-content .checklist-text {
			background: #FAFAFA;
			display: inline-block;
			padding: 10px;
		}

		::v-deep .checklist-box .radio__inner {
			display: none !important;
		}
	}

	.num {
		display: flex;
	}

	.veiw-item {
		width: 100%;

		padding: 25rpx 0;

		.pic {
			display: flex;
			width: 100%;
			padding: 30px;
			height: 600rpx;
			border-radius: 20rpx;
			overflow: hidden;

			.img {
				width: 100%;
				height: 100%;
			}
		}

		.text {
			flex: 1;
			padding-left: 20rpx;
			position: relative;

			.title {
				font-size: 34rpx;
				font-weight: bold;
				@include ellipsis();
			}

			.price {
				@include flex-box-set(start, end);
				font-weight: bold;
				padding: 25rpx 0;

				.big {
					font-size: 34rpx;
					color: $brand-theme-color;
				}

				.small {
					font-size: 26rpx;
					opacity: 0.4;
					text-decoration: line-through;
					padding-left: 10rpx;
				}
			}

			.discount {
				font-size: 22rpx;
				color: $brand-theme-color;
				padding: 3rpx 8rpx;
				border: 1rpx solid $brand-theme-color;
				display: inline-block;
				border-radius: 6rpx;
			}

			.numbox {
				position: absolute;
				right: 0;
				bottom: 0;

				.skuSelect {
					height: 40rpx;
					padding: 0 10rpx;
					background: $brand-theme-color;
					font-size: 28rpx;
					color: #fff;
				}
			}
		}

	}
</style>